<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>游戏配置</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        .el-header {
            /*background-color: #B3C0D1;*/
            background-color: #99CCCC;
            color: #333;
        }

        .el-aside {
            /*#D3DCE6;*/
            background-color: #545c64;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 100%;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .asideModel {
            height: 160px;
        }

        a {
            text-decoration: none;
        }

        .logoImg {
            float: left;
            width: 180px;
            height: 90px;
            margin: 30px 30px 10px 30px;
            opacity: 0.85;
        }

        .mainBtn123 {
            /*float: left;*/
            width: 180px;
            height: 40px;
            margin: 0px 30px 30px 30px;
        }

        .link {
            margin: 10px 0px 0px 0px;
            height: 50px;
        }

        .changespan {
            text-align: right;
            margin-right: -20px;
        }

        .outspan {
            text-align: right;
            padding-right: 20px;
        }

        .headImg {
            float: right;
            border: 2px solid lightslategray;
            margin-top: 10px;
            margin-right: 10px;
        }

        .username {
            float: right;
            line-height: 70px;
        }

        .el-form {
            width: 40%;
            text-align: left;
            margin: 40px auto;
        }


    </style>
</head>
<body>
<div id="mydiv">
    <el-container>
        <el-aside width="240px">
            <!--系统名称和logo-->
            <div class="titleHead"><img class="logoImg" src="/secondStage/img/logo333.png"/>
                <a href="/secondStage/main.html">
                    <el-button type="primary" icon="el-icon-s-home" class="mainBtn123">首 页</el-button>
                </a>
            </div>
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu default-active="301" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu :index="menus.pid" v-for="menus in usermenus">
                            <template slot="title">
                                <i :class="menus.glyphicon"></i>
                                <span>{{menus.pname}}</span>
                            </template>
                            <el-menu-item-group v-for="menu in menus.menuList">
                                <a :href="menu.url">
                                    <el-menu-item :index="menu.pid">
                                        <i :class="menu.glyphicon"></i>
                                        {{menu.pname}}
                                    </el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>

        </el-aside>
        <el-container>
            <el-header style="height: 60px">
                <el-row>
                    <!--头像-->
                    <el-col :span="5" :offset="15">
                        <span class="username">欢迎您：<strong>{{username}}</strong></span>
                        <el-avatar :size="45" :src="circleUrl" class="headImg"></el-avatar>
                    </el-col>
                    <el-col :span="2" class="changespan">
                        <el-link href="/secondStage/html/alterPassword.html" icon="el-icon-edit" class="link">修改密码
                        </el-link>
                    </el-col>
                    <el-col :span="2" class="outspan">
                        <el-link @click="islogout" icon="el-icon-switch-button" class="link">退出登录</el-link>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>
                <!--导航栏-->
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="首页" disabled></el-tab-pane>
                    <el-tab-pane label="修改游戏" name="gameConfig">

                        <!--此处应为每个页面不同的显示区域-->

                        <!--新增的模表单-->
                        <!--<el-dialog title="新增菜单信息" :visible.sync="dialogFormVisible2">-->
                        <el-form :model="form" ref="numberValidateForm">
                            <el-form-item label="游戏名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏标题" :label-width="formLabelWidth" prop="title">
                                <el-input v-model="form.title" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="游戏图标" :label-width="formLabelWidth" prop="gameicon">

                                <el-upload
                                        action="/secondStage/fileUpload"
                                        list-type="picture-card"
                                        accept=".png,.jpeg,.jpg"
                                        :limit="1"
                                        data="a"
                                        ref="upload1"
                                        :file-list="fileList1"
                                        :show-file-list="true"
                                        :on-preview="handlePictureCardPreview1"
                                        :on-success="gameiconSuccess">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible1">
                                    <img width="100%" :src="dialogImageUrl1" alt="">
                                </el-dialog>


                                <!--<el-button size="small" type="primary" @click="dialogVisible = true">点击上传</el-button>-->
                                <!--<span>{{gameiconSuccessText}}</span>-->
                                <!--<el-input v-model="form.gameicon" autocomplete="off"-->
                                <!--placeholder="已有地址？在此处输入正确的地址"></el-input>-->
                                <!--&lt;!&ndash;新增头像的模态框及文件上传&ndash;&gt;-->
                                <!--<el-dialog-->
                                <!--:visible.sync="dialogVisible"-->
                                <!--width="30%">-->
                                <!--<span>-->
                                <!--<el-upload-->
                                <!--:auto-upload="false"-->
                                <!--action="/secondStage/fileUpload"-->
                                <!--accept=".png,.jpeg,.jpg"-->
                                <!--ref="upload"-->
                                <!--:show-file-list="true"-->
                                <!--:limit="1"-->
                                <!--list-type="picture-card"-->
                                <!--:on-success="gameiconSuccess">-->
                                <!--<i class="el-icon-plus"></i>-->
                                <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,只可上传一张图片，如需替换请先删除</div>-->
                                <!--</el-upload>-->
                                <!--</span>-->
                                <!--<span slot="footer" class="dialog-footer">-->
                                <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
                                <!--<el-button type="primary" @click="addFile">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->
                            </el-form-item>


                            <el-form-item label="游戏详情图片" :label-width="formLabelWidth" prop="detailpic">

                                <el-upload
                                        action="/secondStage/fileUpload"
                                        list-type="picture-card"
                                        accept=".png,.jpeg,.jpg"
                                        ref="upload2"
                                        data="b"
                                        multiple
                                        :file-list="fileList2"
                                        :show-file-list="true"
                                        :on-remove="detailpicRemove"
                                        :on-preview="handlePictureCardPreview2"
                                        :on-success="detailpicSuccess">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible2">
                                    <img width="100%" :src="dialogImageUrl2" alt="">
                                </el-dialog>

                                <!--<el-button size="small" type="primary" @click="dialogVisible2 = true">点击上传</el-button>-->
                                <!--<span>{{detailpicSuccessText}}</span>-->
                                <!--<el-input v-model="form.detailpic" autocomplete="off"-->
                                <!--placeholder="已有地址？在此处输入正确的地址。多个地址用;分割"></el-input>-->
                                <!--&lt;!&ndash;新增游戏详情图片的模态框及文件上传&ndash;&gt;-->
                                <!--<el-dialog-->
                                <!--:visible.sync="dialogVisible2"-->
                                <!--width="30%">-->
                                <!--<span>-->
                                <!--<el-upload-->
                                <!--:auto-upload="false"-->
                                <!--action="/secondStage/fileUpload"-->
                                <!--accept=".png,.jpeg,.jpg"-->
                                <!--ref="upload"-->
                                <!--multiple-->
                                <!--:show-file-list="true"-->
                                <!--list-type="picture-card"-->
                                <!--:on-success="detailpicSuccess">-->
                                <!--<i class="el-icon-plus"></i>-->
                                <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>-->
                                <!--</el-upload>-->

                                <!--</span>-->
                                <!--<span slot="footer" class="dialog-footer">-->
                                <!--<el-button @click="dialogVisible2 = false">取 消</el-button>-->
                                <!--<el-button type="primary" @click="addFile">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->
                            </el-form-item>


                            <el-form-item label="ios下载地址" :label-width="formLabelWidth" prop="iosurl">

                                <el-upload
                                        action="/secondStage/fileUpload"
                                        :limit="1"
                                        data="c"
                                        ref="upload3"
                                        :file-list="fileList3"
                                        :show-file-list="true"
                                        :on-remove="iosurlRemove"
                                        :on-success="iosurlSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">上传新文件之前，请先删除旧文件</div>
                                </el-upload>


                                <!--<el-button size="small" type="primary" @click="dialogVisible3 = true">点击上传</el-button>-->
                                <!--<span>{{iosurlSuccessText}}</span>-->
                                <!--<el-input v-model="form.iosurl" autocomplete="off"-->
                                <!--placeholder="已有地址？在此处输入正确的地址"></el-input>-->
                                <!--&lt;!&ndash;ios下载地址的模态框及文件上传&ndash;&gt;-->
                                <!--<el-dialog-->
                                <!--:visible.sync="dialogVisible3"-->
                                <!--width="30%">-->
                                <!--<span>-->
                                <!--<el-upload-->
                                <!--:auto-upload="false"-->
                                <!--action="/secondStage/fileUpload"-->
                                <!--drag-->
                                <!--ref="upload"-->
                                <!--multiple-->
                                <!--:limit="1"-->
                                <!--:on-success="iosurlSuccess">-->
                                <!--<i class="el-icon-upload"></i>-->
                                <!--<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
                                <!--<div class="el-upload__tip" slot="tip">请上传游戏安装包文件</div>-->
                                <!--</el-upload>-->
                                <!--</span>-->
                                <!--<span slot="footer" class="dialog-footer">-->
                                <!--<el-button @click="dialogVisible3 = false">取 消</el-button>-->
                                <!--<el-button type="primary" @click="addFile">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->
                            </el-form-item>


                            <el-form-item label="android下载地址" :label-width="formLabelWidth" prop="androidurl">

                                <el-upload
                                        action="/secondStage/fileUpload"
                                        :limit="1"
                                        data="d"
                                        ref="upload4"
                                        :file-list="fileList4"
                                        :show-file-list="true"
                                        :on-remove="androidurlRemove"
                                        :on-success="androidurlSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">上传新文件之前，请先删除旧文件</div>
                                </el-upload>


                                <!--<el-button size="small" type="primary" @click="dialogVisible4 = true">点击上传</el-button>-->
                                <!--<span>{{androidurlSuccessText}}</span>-->
                                <!--<el-input v-model="form.androidurl" autocomplete="off"-->
                                <!--placeholder="已有地址？在此处输入正确的地址"></el-input>-->
                                <!--&lt;!&ndash;android下载地址的模态框及文件上传&ndash;&gt;-->
                                <!--<el-dialog-->
                                <!--:visible.sync="dialogVisible4"-->
                                <!--width="30%">-->
                                <!--<span>-->
                                <!--<el-upload-->
                                <!--:auto-upload="false"-->
                                <!--action="/secondStage/fileUpload"-->
                                <!--drag-->
                                <!--ref="upload"-->
                                <!--multiple-->
                                <!--:limit="1"-->
                                <!--:on-success="androidurlSuccess">-->
                                <!--<i class="el-icon-upload"></i>-->
                                <!--<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
                                <!--<div class="el-upload__tip" slot="tip">请上传游戏安装包文件</div>-->
                                <!--</el-upload>-->
                                <!--</span>-->
                                <!--<span slot="footer" class="dialog-footer">-->
                                <!--<el-button @click="dialogVisible4 = false">取 消</el-button>-->
                                <!--<el-button type="primary" @click="addFile">确 定</el-button>-->
                                <!--</span>-->
                                <!--</el-dialog>-->
                            </el-form-item>
                            <el-form-item label="推荐类型" :label-width="formLabelWidth" prop="type">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option label="普通" value="普通"></el-option>
                                    <el-option label="最新" value="最新"></el-option>
                                    <el-option label="精选" value="精选"></el-option>
                                    <el-option label="首页推荐" value="首页推荐"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                                <el-select v-model="form.status" placeholder="请选择">
                                    <el-option label="启用" value="启用"></el-option>
                                    <el-option label="下线" value="下线"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="游戏分类" :label-width="formLabelWidth" prop="typename">
                                <el-select v-model="form.typename" placeholder="请选择">
                                    <el-option label="休闲益智" value="休闲益智"></el-option>
                                    <el-option label="角色扮演" value="角色扮演"></el-option>
                                    <el-option label="体育竞技" value="体育竞技"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="平台类型" :label-width="formLabelWidth" prop="platform">
                                <el-select v-model="form.platform" placeholder="请选择">
                                    <el-option label="ios" value="ios"></el-option>
                                    <el-option label="android" value="android"></el-option>
                                    <el-option label="all" value="all"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="游戏描述" :label-width="formLabelWidth" prop="desc">
                                <el-input type="textarea" v-model="form.desc" autocomplete="off"
                                          class="titleInput"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                        <el-button type="primary" @click="submitTheEdit(form)">确 定</el-button>


                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#mydiv",
        data() {
            return {
                usermenus: "",
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                username: "",
                activeName: "gameConfig",
                form: {
                    gid: "",
                    name: "",
                    title: "",
                    downloadcount: "",
                    size: "0",
                    gameicon: "",
                    detailpic: "",
                    iosurl: "",
                    androidurl: "",
                    typename: "",
                    type: "",
                    status: "",
                    platform: "",
                    desc: ""
                },
                formLabelWidth: '150px',

                dialogVisible1: false,// 游戏图标上传的模态框控制
                dialogImageUrl1: "",
                fileList1: [],
                dialogVisible2: false,// 游戏详情上传的模态框控制
                dialogImageUrl2: "",
                fileList2: [],
                fileList3: [],
                fileList4: []

            }
        },
        methods: {
            // 文件上传相关
            handlePictureCardPreview1(file) {
                this.dialogImageUrl1 = file.url;
                this.dialogVisible1 = true;
            },
            handlePictureCardPreview2(file) {
                this.dialogImageUrl2 = file.url;
                this.dialogVisible2 = true;
            },
            detailpicRemove(file, fileList) {
                this.form.detailpic = "";
                if (fileList.length != 0) {
                    for (let j = 0; j < fileList.length; j++) {
                        this.form.detailpic = fileList[j].url.substring(13)+";"+this.form.detailpic; // 去掉前边带的/secondStage/
                        console.log(this.form.detailpic);
                    }
                }

            },
            iosurlRemove(file, fileList) {
                this.form.iosurl = fileList;
            },
            androidurlRemove(file, fileList) {
                this.form.androidurl = fileList;
            },
            gameiconSuccess(response, file, fileList) {
                this.form.gameicon = response.a;
            },
            detailpicSuccess(response, file, fileList) {
                this.form.detailpic = response.b + ";" + this.form.detailpic;
            },
            iosurlSuccess(response, file, fileList) {
                this.form.iosurl = response.c;
                this.form.size = (file.raw.size / 1024 / 1024).toFixed(2);
            },
            androidurlSuccess(response, file, fileList) {
                this.form.androidurl = response.d;
                this.form.size = (file.raw.size / 1024 / 1024).toFixed(2);

            },

            // 重置表单
            resetForm(form) {
                this.$refs[form].resetFields();
            },
            // 导航栏的打开和折叠
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            islogout() {
                this.$confirm('此操作将退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = "/secondStage/login?method=logout";
                });
            },
            submitTheEdit(form) {
                var submit = window.Qs.stringify(form) + "&method=updateGameInfo";
                console.log(submit);
                axios.post('/secondStage/editGame', submit)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.$message({
                                showClose: true,
                                message: '游戏信息修改成功',
                                type: 'success',
                                center: true
                            });
                            setTimeout(() => {
                                location.href = "/secondStage/html/gameManagement/gameConfig.html";
                            }, 500);
                        } else {
                            this.$message({
                                showClose: true,
                                message: '游戏信息修改失败，请检查后重试或联系管理员',
                                type: 'error',
                                center: true
                            });
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            // 异步请求获得用户权限信息，姓名和头像，以及刷新用户表单数据
            refreshTable(param) {
                axios.post('/secondStage/game', param)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.usermenus = response.data.returnData;
                            this.circleUrl = "/secondStage/" + response.data.returnAccount.aimg;
                            this.username = response.data.returnAccount.aname;
                            // 给表单数据赋值
                            //获取路径
                            let pathName = window.document.location.pathname;
                            //截取，得到项目名称
                            let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);

                            this.form.gid = response.data.pageInfo.gameList[0].gid;
                            this.form.name = response.data.pageInfo.gameList[0].name;
                            this.form.title = response.data.pageInfo.gameList[0].title;
                            this.form.size = response.data.pageInfo.gameList[0].size;
                            this.fileList1.push({"url": projectName + "\\" + response.data.pageInfo.gameList[0].gameicon});
                            this.form.gameicon = response.data.pageInfo.gameList[0].gameicon;
                            // 非空校验
                            if (response.data.pageInfo.gameList[0].detailpic != null) {
                                let split = response.data.pageInfo.gameList[0].detailpic.split(";");
                                for (let j = 0; j < split.length; j++) {
                                    this.fileList2.push({"url": projectName + "\\" + split[j]});
                                }
                                this.form.detailpic = response.data.pageInfo.gameList[0].detailpic;
                            }
                            // 非空校验
                            if (response.data.pageInfo.gameList[0].iosurl != null) {
                                let split1 = response.data.pageInfo.gameList[0].iosurl.split("\\");
                                this.fileList3.push({
                                    "name": split1[1],
                                    "url": projectName + "\\" + response.data.pageInfo.gameList[0].iosurl
                                });
                                this.form.iosurl = response.data.pageInfo.gameList[0].iosurl;
                            }
                            // 非空校验
                            if (response.data.pageInfo.gameList[0].androidurl != null) {
                                let split2 = response.data.pageInfo.gameList[0].androidurl.split("\\");
                                this.fileList4.push({
                                    "name": split2[1],
                                    "url": projectName + "\\" + response.data.pageInfo.gameList[0].androidurl
                                });
                                this.form.androidurl = response.data.pageInfo.gameList[0].androidurl;
                            }

                            this.form.typename = response.data.pageInfo.gameList[0].typename;
                            this.form.type = response.data.pageInfo.gameList[0].type;
                            this.form.status = response.data.pageInfo.gameList[0].status;
                            this.form.platform = response.data.pageInfo.gameList[0].platform;
                            this.form.desc = response.data.pageInfo.gameList[0].desc;


                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },

        created() {
            this.refreshTable('method=getGameById&gid=' + sessionStorage.getItem("gid"));
        }
    })
</script>
</html>
